<template>
	<view class="myContent" style="width:100%;height:100%">
		<view class="bgImg">
		</view>
		<!-- 用户信息 -->
		<view class="userInfo ">
			<image class="topimage" src="/static/user/user.jpg" mode="widthFix"></image>
			<view class="userType">
				<!-- <view class="userName vipyyBg" v-if="vipLevel">
					白金卡会员
				</view> -->
				<view class="userName" :class="vipLevel==1?'vipyBg':'isDisplay'">
					银卡会员
				</view>
				<view class="userName" :class="vipLevel==2?'vipjBg':'isDisplay'">
					金卡会员
				</view>
				<view class="userName" :class="vipLevel==3?'vipbjBg':'isDisplay'">
					白金卡会员
				</view>
				<view class="userName" :class="vipLevel==4?'vipzsBg':'isDisplay'">
					钻石卡会员
				</view>
				<!--  -->
				<view class="phone">{{proxy.sjuLogin.getValue("miaoMobile")}}  <text class="renew" v-if="renew" @click="jumpMoney">会员到期，点击续费</text> </view>
				<view class="deadtime" v-if="deadLine">会员到期时间：{{deadLine}}</view>
			</view>
		</view>
		<!-- 个人中心功能 -->
		<view class="menu">
			<view class="order">
				<view class="title">
					<view class="mine">
						我的订单
					</view>
					<view class="allMine" @click="navTo('/my/listType')">
						全部订单 >
					</view>

				</view>
				<view class="listClun">
					<uni-grid :column="4" :highlight="true" @change="change" :showBorder="false" :square="false">
						<uni-grid-item v-for="(item, index) in orderStatus" :index="index" :key="index"
							@click="enterList(index)">
							<view class="grid-item-box" style="background-color: #fff;">
								<image :src="item.url" mode="widthFix"></image>
								<text class="text">{{item.text}}</text>
								<!-- <text class="number" v-if="item.text == '待接单'">
									1
								</text> -->
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			<view class="evaluate">
				<view class="list" v-for="(item,index) in evaluateStatus" :index="index" :key="index"
					@click="enterSelect(index)">
					<image :src="item.url" mode="widthFix"></image>
					<text class="text">{{item.text}}</text>
				</view>

			</view>

		</view>
		<view class="loginOut" @click="loginOut ">
			退出登录
		</view>
	</view>
</template>

<script setup>
	import * as login from '@/common/sju.login.js'
	import {
		onMounted
	} from "vue";
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	// import menuList from '@/components/menuList/menuList.vue'
	const vipLevel = ref(-1)
	const deadLine = ref()
	const renew = ref(false)
	const bgImageColor = computed(() => {
		return useThemeStore().bgImage
	})
	const orderStatus = ref([{
			value: 0,
			"text": "待接单",
			"url": '../../../static/user/待接单@3x.png'
		},

		{
			value: 2,
			"text": "待派单",
			"url": '../../../static/user/待派单@3x.png'
		},
		{
			value: 3,
			"text": "已派单",
			"url": '../../../static/user/已派单@3x.png'
		},
		{
			value: 4,
			"text": "已完成",
			"url": '../../../static/user/已完成@3x.png'
		}
	])
	const evaluateStatus = ref([{
			value: 0,
			"text": "我的评价",
			"url": '../../../static/user/我的评价@3x.png'
		},

		{
			value: 2,
			"text": "我的地址",
			"url": '../../../static/user/dizhi-yimidida-@3x.png'
		},
		{
			value: 3,
			"text": "客服电话",
			"url": '../../../static/user/客服@3x.png'
		}

	])

	onLoad((options) => {
		if (!proxy.sjuBase.isNull(options.openid)) {
			proxy.sjuLogin.saveValue("carSelfopenid", options.openid);
		}
	})
	onShow(() => { 
	console.log(proxy.sjuConfig.appInfo.appId)
		proxy.sjuRequest.request("/api/weixin/queryMember/" + proxy.sjuLogin.getValue("carSelfopenid"), 'post').then(
			res => {
				console.log(res)
				
				if (res.data) {
					let level = res.data.memberLevel
					console.log(res)
					if(res.data.status==1){
						if (level == 'yy' || level == 'yn') {
							vipLevel.value = 1
						} else if (level == 'jy' || level == 'jn') {
							vipLevel.value = 2
						} else if (level == 'by' || level == 'bn') {
							vipLevel.value = 3
						} else if (level == 'zy' || level == 'zn') {
							vipLevel.value = 4
						}
						deadLine.value = res.data.expirationTime.split(' ')[0];
					}else if(res.data.status==0){
						renew.value=true
					}
					
				}

				console.log(deadLine.value)

			})
		// getpayOrderIdFun()
	})
	// 页面跳转
	const navTo = path => {
		proxy.sjuNav.navigateTo(path)
	}

	const change = (e) => {
		console.log(e)
	}

	const click = () => {
		proxy.sjuNav.navigateTo('/my/setting')
	}
	const enterList = (e) => {
		console.log(e)
		// uni.navigateTo({
		// 	url: '/sub_my/pages/listType/listType?type='+e
		// })
		proxy.sjuNav.navigateTo('/my/listType?type=' + e)
	}
	const enterSelect = (e) => {
		console.log(e)
		if (e == 0) {
			proxy.sjuNav.navigateTo('/my/judgment')
		} else if (e == 1) {
			proxy.sjuNav.navigateTo('/my/myAddress')
		}else if(e==2){
			callphone()
		}

	}
	const loginOut = () => {

		proxy.sjuAlert.showConfirm('您确定要退出自助洗车管家吗?', () => {
			//点击确认后执行方法`
			proxy.sjuLogin.clearKey("miaoMobile");
			navTo('/intake/login')
		}, () => {
			//点击取消后执行方法

		}, '提示')

		// navTo('/intake/login')
	}
	const jumpMoney=()=>{
		proxy.sjuNav.navigateTo('/my/becomeVip?type=0')
	}
	const callphone = () => {
		uni.makePhoneCall({
			phoneNumber: '4001768987',
			success: () => {
				console.log('拨打电话成功！');
			},
			fail: () => {
				console.error('拨打电话失败！');
			}
		});
	}
</script>

<style lang="scss">
	.myContent {
		width: 100%;
		height: 100%;
		background: url('../../../static/user/userBg.png')no-repeat;
		background-size: 100% 250rpx;
		padding: 0 20px;
		padding-top: 30px;
		box-sizing: border-box;
		margin: 0 auto;
	}

	// 用户信息
	.userInfo {
		width: 100%;
		height: 250rpx;
		background: url('../../../static/user/头像背景@3x.png')no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.topimage {
			width: 50px;
			border-radius: 50%;
		}

		.deadtime {
			font-size: 22rpx;
		}
		.renew{
			display: inline-flex;
			font-size: 22rpx;
			padding:2px 5px;
			border-radius: 5px;
			background: #EBEBEB;
		}

		.userType {
			display: flex;
			// align-items: center;
			// justify-content: center;
			flex-direction: column;
			margin-left:10rpx;

			.userName {
				width: 180rpx;
				height: 50rpx;

				padding-left: 50rpx;
				box-sizing: border-box;
				font-size: 20rpx;
				padding-top: 11rpx;

			}

			.isDisplay {
				display: none;
			}

			.vipyBg {
				background: url("@/static/user/银卡会员@3x_1.png")no-repeat;
				background-size: 100% 100%;
				color: #4F75BD;
			}

			.vipjBg {
				background: url("@/static/user/金卡会员@3x_1.png")no-repeat;
				background-size: 100% 100%;
				color: #754C20;
			}

			.vipbjBg {
				background: url("@/static/user/白金卡会员@3x_1.png")no-repeat;
				background-size: 100% 100%;
				color: #F85837;
			}

			.vipzsBg {
				background: url("@/static/user/银卡会员@3x_1.png")no-repeat;
				background-size: 100% 100%;
				color: #4F75BD;
			}

			.phone {
				font-size: 26rpx;
				// padding-left: 20rpx;
				color: #949494;
				line-height: 2;

			}

		}
	}

	// 功能
	.menu {
		width: 100%;
		height: auto;
		margin-top: 40rpx;

		.order {
			width: 100%;
			height: 260rpx;
			border-radius: 10px;
			box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
			// padding:20rpx;
			box-sizing: border-box;


			.title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 40px;
				line-height: 40px;
				padding: 0 10px;
				box-sizing: border-box;
				border-bottom: 1px solid #EBEBEB;

				.mine {
					font-size: 30rpx;
					color: #161616;
					font-weight: bold;

				}

				.allMine {
					font-size: 24rpx;
					color: #555252;

				}
			}

			.listClun {
				margin-top: 15rpx;
				width: 100%;

				background: #fff;
				border-radius: 10px;

				box-sizing: border-box;

				image {
					width: 50rpx;
				}

				text {
					font-size: 12px;
					font-weight: bold;
					line-height: 30px;
				}

				.grid-item-box {
					background-color: rgba(0, 0, 0, 0) !important;
					flex: 1;
					// position: relative;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 10px 0;
					position: relative;

					.grid-item-box-row {
						flex: 1;
						// position: relative;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: row;
						align-items: center;
						justify-content: center;
						padding: 15px 0;

						.grid-dot {
							position: absolute;
							top: 5px;
							right: 15px;
						}
					}

					.number {
						display: inline-block;
						padding: 3px 5px;
						line-height: 10px;
						background: #F85837;
						color: #fff;
						border-radius: 3px;
						position: absolute;
						top: 6rpx;
						right: 50rpx
					}
				}

			}
		}

		.evaluate {
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;
			width: 100%;
			// height: 360rpx;
			border-radius: 5px;
			box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
			// padding:20rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.list {
				display: flex;
				height: 90rpx;
				// line-height: 70rpx;
				align-items: center;

				image {
					width: 35rpx;
				}

				.text {
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #111111;
				}

			}
		}

	}

	.loginOut {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #C9C9C9;
		border-radius: 30px;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		color: #111111;
		font-weight: bold;
	}
</style>